<template>
	<div class="form-rules-container layout-pd">
		<el-form :model="queryParams" size="default" inline label-width="100px" class="mt35 mb35">
			<el-form-item label="菜单名称">
				<el-input v-model="queryParams.name" placeholder="请输入角色名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="menulistData">搜索</el-button>
				<el-button >重置</el-button>
			</el-form-item>
			<el-row>
				<el-col :span="24">
					<el-button type="primary" @click="handleOpen">新增</el-button>
				</el-col>
			</el-row>
		</el-form>
		<div>
			<el-table :data="menuData" row-key="id">
				<el-table-column label="ID" prop="id"></el-table-column>
				<el-table-column label="菜单名称" prop="name"></el-table-column>
				<el-table-column label="上级菜单" prop="paretName"></el-table-column>
				<el-table-column label="接口地址" prop="path"></el-table-column>
				<!-- <el-table-column label="组件路径" prop="component"></el-table-column> -->
				<el-table-column fixed="right" label="操作" width="120">
					<template #default="scope">
						<el-button link type="primary" size="small" @click="handleOpen(scope.row)">修改</el-button>
						<el-button link type="primary" size="small" @click="delMenu(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			
		</div>

		 <el-dialog
			v-model="dialogVisible"
			title="编辑菜单"
			width="30%"
			:before-close="handleClose"
		>
			<el-form :model="menuForm" ref="menuFormRef" :rules="rules">
			  <el-form-item label="菜单名称" prop="name">
				<el-input v-model="menuForm.name" placeholder="填写角色名称"></el-input>
			  </el-form-item>
			  <el-form-item label="上级菜单">
				<el-select v-model="menuForm.pid" placeholder="上级菜单">
				  <el-option v-for="item in menuData" :key="item.id" :value="item.id" :label="item.name"></el-option>
				</el-select>
			  </el-form-item>
			  <el-form-item label="接口地址" v-if="menuForm.pid">
				<el-input v-model="menuForm.path" placeholder="填写访问地址"></el-input>
			  </el-form-item>
			  <!-- <el-form-item label="接口地址" >
				<el-input v-model="menuForm.path" placeholder="填写访问地址"></el-input>
			  </el-form-item> -->
			</el-form>
			<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">Cancel</el-button>
				<el-button type="primary" @click="submitForm">
				提交
				</el-button>
			</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="pagesFormRules">
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import{addOrUpdateMenu,menuPageList,deleteMenu} from '@/api/system/menu'

const tableData = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
    children: [
      {
        id: 31,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        id: 32,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ],
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
]



// 定义变量内容
const upMenuList=ref([])
const dialogVisible = ref(false)
const menuData = ref([])
const total = ref(0)
const currPageCount = ref(0)
const menuForm=ref({
	name:null,
	id:null,
	component:null,
	path:null,
	pid:null
})
const queryParams = ref({
	name:null
})
const rules = ref({
  name: [
    { required: true, message: '请输入菜单名称', trigger: 'blur' }
  ]
})

function handleOpen(val:any){
	dialogVisible.value = true
	console.log(val)
	if(val){
		menuForm.value.id = val.id
		menuForm.value.component = val.component
		menuForm.value.path = val.path
		menuForm.value.name = val.name
		menuForm.value.pid = val.pid==0?null:val.pid
		// Object.assign(menuForm, val);
	}
}
function handleClose(){
	dialogVisible.value = false
}
//删除菜单
function delMenu(){

}
//点击分页
function menulistData(){
	menuPageList(queryParams).then((resp:any)=>{
		menuData.value = resp.data
	})
}
function submitForm(){
	addOrUpdateMenu(menuForm.value).then((resp:any)=>{
		if(resp.code==200){
			ElMessage({
				message: '提交成功',
				type: 'success',
			})	
			handleClose()
			menulistData()
		}
	})
}
onMounted(() => {
	menulistData();
});
</script>
